<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 100 100" width="400" height="400">
        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                from="30" 
                to="60"
                dur="1s"
                begin="2s"
                fill="freeze"/>
        </circle>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">
        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                from="30" 
                to="60"
                dur="1s"
                begin="btn2.click"
                fill="freeze"/>
        </circle>

        <g style="cursor:pointer" id="btn2">
            <rect x="40" y="60" width="20" height="10" rx="5" ry="5" fill="#ccc" stroke="#000" />
            <text x="50"  y="67" font-size="6" text-anchor="middle">按钮</text>
        </g>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">
       <rect x="20" y="20" width="0" height="10" fill="#f00">
            <animate id="a31" attributeType="XML"
                attributeName="width"
                to="20"
                dur="2s"
                begin="2s"
                fill="freeze"/>
       </rect>

       <rect x="40" y="30" width="0" height="10" fill="#f00">
            <animate  attributeType="XML"
                attributeName="width"
                to="20"
                dur="2s"
                begin="a31.end"
                fill="freeze"/>
        </rect>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">
        <rect x="20" y="20" width="0" height="10" fill="#f00">
             <animate id="a41" attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="2s"
                 begin="2s;a42.end"
                 fill="freeze"/>
        </rect>
 
        <rect x="40" y="30" width="0" height="10" fill="#f00">
             <animate id="a42" attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="2s"
                 begin="a41.end"
                 fill="freeze"/>
         </rect>
     </svg>

    
     <svg viewBox="0 0 100 100" width="400" height="400">
        <rect x="20" y="20" width="0" height="10" fill="#f00">
             <animate id="a51" attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="2s"
                 begin="2s"
                 fill="freeze"
                 repeatCount="indefinite"
                 />
        </rect>
 
        <rect x="40" y="30" width="0" height="10" fill="#f00">
             <animate  attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="2s"
                 begin="a51.repeat(2)"
                 fill="freeze"/>
         </rect>
     </svg>


     <svg viewBox="0 0 100 100" width="400" height="400">
        <rect x="20" y="20" width="0" height="10" fill="#f00">
             <animate id="a61" attributeType="XML"
                 attributeName="width"
                 to="20"
                 dur="3s"
                 fill="freeze"
                 repeatCount="1"
                 />
        </rect>

        <rect x="40" y="30" width="0" height="10" fill="#f00">
            <animate id="a61" attributeType="XML"
                attributeName="width"
                to="20"
                dur="1s"
                end="a61.end"
                fill="freeze"
                repeatCount="indefinite"
                />
       </rect>
 
       
     </svg>


     <svg viewBox="0 0 100 100" width="400" height="400">
        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                from="30" 
                to="60"
                dur="3s"
                begin="btn6.click"
                restart="never"
                fill="freeze"/>
        </circle>

        <g style="cursor:pointer" id="btn6">
            <rect x="40" y="60" width="20" height="10" rx="5" ry="5" fill="#ccc" stroke="#000" />
            <text x="50"  y="67" font-size="6" text-anchor="middle">按钮</text>
        </g>
    </svg>

    <script src="index.js"></script>
</body>
</html>